<template>
  <div class="Diseaseselfs">
    <div class="center">
      <div class="yyuan">
        <div class="yyright">
          <ul class="entitle">
            <li>疾</li>
            <li>病</li>
            <li>自</li>
            <li>测</li>
          </ul>
          <div class="left_div">
            <Search></Search>
            <!--  -->
            <div class="left_list">
              <div
                v-for="(item, index) in Name"
                :key="index"
                class="left_list_div"
              >
                <router-link to="#" class="link">
                  {{ item.name }}
                </router-link>
              </div>
            </div>
            <!-- 热点关键词 -->
            <div class="hot_title">热点关键词</div>
            <!--  -->
            <div class="hot">
              <div
                v-for="(item, index) in hot"
                :key="index"
                class="hot_list_div"
              >
                <div class="hot_option_div">
                  <router-link to="#" class="link">
                    {{ item.name }}
                  </router-link>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="yyleft">
          <p class="flower"><img src="../assets/flower.png" /></p>
          <div class="cen" >

            <div class="cencen">
              <div>
                <p class="tp">【{{cen2.title}}】{{cen2.content }}</p>
              </div>
              <div class="top">
                <p class="tet" style="border:1px red solidx">{{cen3.zice_content}}</p>
              </div>
              <div class="btn">
                <p class="yes"><router-link :to="{path:'/westernmed',query:{id:1}}">是</router-link></p>
                <p class="yes"><router-link to="/">否</router-link></p>
              </div>
            </div>


          </div>
          <p class="flower"><img src="../assets/flower.png" /></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Search from "@/components/Search.vue";
export default {
  name: "Diseaseselfs",
  components: {
    Search,
  },
  data: function() {
    return {
       id1:'',
      Name: [
        { name: "红斑" },
        { name: "甲状" },
        { name: "甲状" },
        { name: "更年" },
        { name: "不孕" },
        { name: "自巅" },
        { name: "男子" },
        { name: "肌肉" },
        { name: "红斑" },
        { name: "甲状" },
        { name: "甲状" },
        { name: "更年" },
        { name: "不孕" },
        { name: "自巅" },
        { name: "男子" },
        { name: "肌肉" },
        { name: "红斑" },
        { name: "甲状" },
        { name: "甲状" },
        { name: "更年" },
      ],
      hot: [
        { name: "尿床，" },
        { name: "遗尿尘肺" },
        { name: "荨麻疹" },
        { name: "月经不调" },
        { name: "荨麻疹" },
        { name: "月经不调" },
        { name: "遗精滑精" },
        { name: "甲亢" },
      ],
      cen2:{},
      cen3:{}
    };
  },
   created(){
     this.id1=this.$router.history.current.query.id;
    axios.get('/zice/zicelist?id='+this.id1)
    .then((res)=>{this.cen2=res.data.zice;this.cen3=res.data.jibing[0]})
  }
};
</script>

<style scoped>
.Diseaseselfs {
  width: 100%;
  padding: 1rem 0;
  background-color: #fce7d7;
}
.entitle {
  width: 32%;
  text-align: center;
  margin: 3rem auto;
  overflow: hidden;
  margin-top: 5rem;
}
.entitle li {
  float: left;
  width: 70px;
  height: 70px;
  line-height: 70px;
  background-color: #a40100;
  text-align: center;
  font-size: 38px;
  font-family: "楷体";
  color: #fff;
  border-radius: 40px;
  margin-right: 10px;
}
.yyuan {
  width: 100%;
  padding-left: 3%;
  padding-bottom: 4rem;
  display: flex;
  justify-content: space-between;
}
.yyuan .yyleft {
  width: 70%;
  margin-top: 5rem;
  /* border: 1px solid #f00; */
}
.yyuan .yyright {
  width: 25%;
  margin-top: 4rem;
  /* border: 1px solid #f00; */
}

.entitle {
  width: 84%;
  /* border: 1px solid #fff; */
  text-align: center;
  margin: 3rem auto;
  overflow: hidden;
  margin-top: 2rem;
}
.entitle li {
  float: left;
  width: 70px;
  height: 70px;
  line-height: 70px;
  background-color: #a40100;
  text-align: center;
  font-size: 38px;
  font-family: "楷体";
  color: #fff;
  border-radius: 40px;
  margin-right: 10px;
}
.left_div {
  background: url(../assets/left_div_ba.png),
    url("../assets/bg.png") no-repeat 20px 323px;
  background-color: #fff5ee;
  height: 645px;
  overflow: hidden;
}
.search {
  margin: 61px auto 0;
}
.left_list {
  width: 256px;
  margin: 40px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
}
.left_list_div {
  width: 51.2px;
  height: 30px;
  margin-bottom: 10px;
}
a {
  color: #6b6661;
}
.left_list_div a:hover {
  font-size: 20px;
  color: #9e290b;
}
.hot_title {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: #9e290b;
  background: url(../assets/left_div_ba1.png) no-repeat;
}
.hot {
  width: 234px;
  margin: 40px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: content;
  text-align: center;
}
.hot_option_div {
  padding: 0 5px;
}
.hot_list_div {
  text-align: center;
  margin-bottom: 20px;
}
.hot_list_div a:hover {
  color: #9e290b;
}
.flower {
  width: 100%;
}
.flower img {
  width: 100%;
}
.cen {
  width: 90%;
  /* border: 1px solid #f00; */
  margin: 0 auto;
  border-left: 1px solid #9e290b;
  border-right: 1px solid #9e290b;
  /* padding-top: 42px; */
  padding-bottom: 100px;
}
.cencen {
  width: 80%;
  margin: 0 auto;
  /* border: 1px solid #f00; */
}
.cencen .tp,
.top {
  color: #af4c31;
  /* font-weight: 550; */
  font-size: 22px;
  padding: 5rem 0;
}
.tet {
  font-size: 20px;
  font-weight: 500;
  margin-top: 2rem;
}
.top {
  padding-left: 5%;
}
.btn {
  width: 22%;
  margin: 0 auto;
  /* border: 1px solid #f00; */
  padding-bottom: 3rem;
}
.btn .yes {
  float: left;
  width: 75px;
  height: 50px;
  background: #9e290b;
  border-radius: 25px;
  margin-right: 4%;
  text-align: center;
  line-height: 50px;
}
.btn .yes a {
  color: #fff;
}
</style>
